<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="../dist/pandyle.js"></script>
    <!-- <script src="../dist/pandyle.min.js"></script> -->
    <title>Document</title>
</head>

<body>
    <div class="main">
        <div p-each="data">
            <div p-each="list" class="list"><span>{{name}}</span></div>
        </div>
        <button onclick="addName()">click me</button>
        <button onclick="refresh()">click me 2</button>
        <button onclick="addName2()">click me 3</button>
    </div>

    <script>
        var index = 3;
        var data = [];
        for (var i = 0; i < 10; i++) {
            data.push({
                list: [
                    { id: i, name: 'test1' },
                    { id: i, name: 'test2' },
                    { id: i, name: 'test3' }
                ]
            })
        }
        var startTime = Date.now();
        var vm = $('.main').vm({
            data: data
        })
        var endTime = Date.now();
        console.log(endTime - startTime);

        function addName() {
            vm.append('data[0].list', {
                id: ++index,
                name: 'test' + index
            })
        }

        function addName2(){
            vm.append($('.list'), {
                id: ++index,
                name: 'test' + index
            })
        }

        function refresh() {
            vm.set('data[0].list', [
                { id: 44, name: 'test44' },
                { id: 54, name: 'test54' },
                { id: 64, name: 'test64' }
            ])
        }
    </script>
</body>

</html>